<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>推荐动态</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style scoped>
        .van-hairline--top-bottom::after,
        .van-hairline-unset--top-bottom::after {
            border: 0;
        }

        .van-tab {
            padding: 0 0.08rem;
        }

        .flex-x-s {
            position: relative;
        }

        .app {
            margin-bottom: 1rem;
            /* margin-bottom: 140px; */
        }


        .circle-list-playIcon {
            color: #3F8CEC;
            font-size: .5rem;
            position: absolute;
            top: -15px;
            left: 10px;
            /* transform: translate(-10%, -10%); */
            width: 20px;
            height: 20px;
        }

        .item {
            border-radius: 8px;
            background-color: #ffffff;
        }

        .item_title {
            color: #666666;
            size: 14px;
            margin: 10px 12px;
            /* padding: 10px 12px; */
            line-height: 20px;
            font-weight: bolder;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .item_media_img {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            width: 100%;
            height: auto;
        }

        .head {
            display: flex;
            flex-direction: row;
            padding: 0 12px 12px 12px;
            justify-content: space-between;
            align-items: center;
        }

        .head_img {
            width: 16px;
            height: 16px;
            border-radius: 8px;
        }

        .name {
            size: 12px;
            color: #999999;
            padding-left: 4px;
            white-space: nowrap;
            overflow: hidden;
            width: 80px;
        }

        .head-left {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .head-right img {
            height: 8px;
            width: 11px;
        }

        .head-right span {
            color: #999;
            size: 12px;
        }

        img {
            max-width: 100%;
        }

        .section:not(:last-child) {
            border-bottom: 1px solid #e5e5e5;
        }

        .container {
            padding: 10px 10px 0px 10px;
        }

        .macy-container {
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
        }

        .macy-container .item {
            max-width: 50%;
            flex-shrink: 0;
            /* margin: 5px; */
        }

        #macy-container::before {
            content: "";
            display: table;
            clear: both;
        }

        #macy-container::after {
            content: "";
            display: table;
            clear: both;
        }

        .circle-list-empty-data {
            width: 100%;
            display: flex;
            margin-top: 100px;
            flex-direction: column;
            align-items: center;
        }

        .circle-list-empty-data .content {
            margin-top: 26px;
            color: #666666;
        }

        .no-login {
            width: 120px;
            margin: 32px auto;
        }

        .item_media_img {
            max-height: 150px;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="container">
            <div id="macy-container" class="macy-container" v-if="!isShowEmpty">
                <div class="item" v-for="(item, index) in dynamicList" :key="index" @click="goPage(item)">
                    <span class="circle-list-playIcon" v-if="item.type==1">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle_video.png" alt="">
                    </span>
                    <img v-if="item.medias.length>0"
                        :src="item.medias[0].imagePath ? item.medias[0].imagePath : 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/loading2.png'"
                        alt="" class="item_media_img">

                    <img v-else src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/loading2.png" alt="" class="item_media_img">
                    <div class="item_title">
                        {{item.title}}
                    </div>

                    <div class="head">
                        <div class="head-left">
                            <img :src="item.headImg?item.headImg:'https://cdn.tiexiemall.com/static/user/default.png'"
                                alt="" class="head_img">
                            <span class="name">
                                {{item.nickName}}
                            </span>
                        </div>
                        <div class="head-right">
                            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/circle_eye.png" alt="">
                            <span>{{item.hitNumber}}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div v-show="isShowEmpty" class="circle-list-empty-data">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/search/nosearch-bg.png" width="143" height="104" alt="">
                <div class="content">暂无相关内容！</div>
            </div>

            <div v-if="isShowNoLogin" class="circle-list-empty-data">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/search/nosearch-bg.png" width="143" height="104" alt="">
                <div class="content">登录后可查看关注内容！</div>
                <div>
                    <van-button class="no-login" round block type="info" native-type="submit" @click="goLogin()">去登录
                    </van-button>
                </div>
            </div>
        </div>
        <!-- </van-list>
        </van-pull-refresh> -->
        <!-- 未登录弹窗 -->
        <van-popup v-model="showNologinPop" :style="{ height: 'auto',width:'80%' }" class="home-no-login-pop">
            <div class="top">
                温馨提示
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/circle_comment_close_ico.png" alt="" width="14" height="14"
                    @click="showNologinPop=false">
            </div>
            <div class="content">
                您还未登录，无法参与视频达人领现金活动！建议您立即登录~
            </div>
            <div class="btn-container">
                <button class="continue" @click="continueLook()">继续观看</button>
                <button class="confirm" @click="goLogin()">去登录</button>
            </div>
        </van-popup>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/macy.js"></script>
    <script src="../../script/masonry.pkgd.min.js"></script>

    <script>
        apiready = function () {

            var vm = new Vue({
                el: '.app',
                data: {
                    showNologinPop: false,//未登录弹窗提示
                    isShowNoLogin: false,
                    queryInfo: {
                        pageSize: 6,
                        pageNum: 1,
                        screenType: null,
                        channelId: null,
                        keyword: null
                    },
                    dynamicList: [],
                    hasNext: true,
                    masonry: null,
                    isShowEmpty: false,
                    currentClickTopicId: null
                },
                // created() {
                //     if (this.queryInfo.screenType == 1 || this.queryInfo.screenType == 0) {
                //         console.log("tab发送")
                //         api.sendEvent({
                //             name: 'eventTab',
                //             extra: { key: ' value' }
                //         });
                //     }
                // },
                mounted() {
                    this.masonry = null
                    this.queryInfo.screenType = api.pageParam.screenType
                    this.queryInfo.channelId = api.pageParam.channelId
                    this.queryInfo.keyword = api.pageParam.keyword

                    console.log(JSON.stringify(api.pageParam))
                    // this.initAllNews();

                    if (this.queryInfo.screenType == 1) {
                        if (!checkToken()) {
                            this.isShowNoLogin = true
                        } else {
                            this.initAllNews();
                        }
                    } else {
                        this.initAllNews();
                    }
                },

                computed: {
                },
                methods: {
                    initAllNews(type) {
                        var vm = this;
                        console.log(JSON.stringify(vm.queryInfo))
                        // 0推荐 1关注(人) 2点赞视频（列表）3我的动态（我发布的视频）4指定用户所有动态（传userId）

                        if (vm.queryInfo.screenType == 0 || vm.queryInfo.screenType == null) {
                            //推荐和搜索
                            circle("initAllNews")(vm.queryInfo, function (ret) {
                                vm.setData(ret, type)
                            })
                        } else if (vm.queryInfo.screenType == 3) {
                            //我的动态
                            circle("listAllMimeMoments")(vm.queryInfo, function (ret) {
                                vm.setData(ret, type)
                            })

                        } else if (vm.queryInfo.screenType == 2) {
                            //点赞
                            circle("listAllLikeMoments")(vm.queryInfo, function (ret) {
                                vm.setData(ret, type)
                                api.sendEvent({
                                    name: 'likeCount',
                                    extra: {
                                        countStr: "赞过（" + ret.data.total + "）"
                                    }
                                })
                            })
                        } else if (vm.queryInfo.screenType == 1) {
                            //关注
                            circle("listAllFocusMoments")(vm.queryInfo, function (ret) {
                                vm.setData(ret, type)
                            })
                        }
                    },

                    setData(ret, type) {
                        console.log(JSON.stringify(ret))
                        var vm = this;
                        if (vm.queryInfo.pageNum == 1) {
                            vm.dynamicList = ret.data.list;
                        } else {
                            vm.dynamicList = vm.dynamicList.concat(ret.data.list);
                        }
                        if (vm.dynamicList.length == 0) {
                            vm.isShowEmpty = true
                        } else {
                            vm.isShowEmpty = false

                        }

                        vm.hasNext = ret.data.hasNext;
                        vm.$nextTick(function () {
                            // 这里调用瀑布流的方式
                            vm.setWaterfall(type)
                        })
                    },

                    //设置瀑布流
                    setWaterfall(type) {
                        const vm = this
                        switch (type) {
                            case 'add':
                                // 追加新元素
                                vm.masonry.runOnImageLoad(function () {
                                    vm.masonry.recalculate(true);
                                }, true);
                                console.log("追加新元素")
                                break
                            case 'reLoad':
                                // 重新加载
                                vm.masonry.reInit()
                                console.log("重新加载")
                                break
                            default:
                                console.log("默认初始化")
                                // 初始化
                                vm.masonry = new Macy({
                                    container: '#macy-container',
                                    trueOrder: false,
                                    waitForImages: true,
                                    useOwnImageLoader: false,
                                    margin: {
                                        y: 10,
                                        x: 10,
                                    },
                                    columns: 2,
                                });

                                // //在ios设备上做个延时 避免重叠
                                if (api.systemType == 'ios') {
                                    $api.css($api.dom('.macy-container'), 'opacity: 0;')
                                    setTimeout(function () {
                                        $api.css($api.dom('.macy-container'), 'opacity: 1;')
                                    }, 800)
                                } else {
                                    $api.css($api.dom('.macy-container'), 'opacity: 0;')
                                    setTimeout(function () {
                                        $api.css($api.dom('.macy-container'), 'opacity: 1;')
                                    }, 200)
                                }
                                break
                        }
                    },

                    //继续观看
                    continueLook() {
                        let vm = this
                        //记录点击的当前时间 保存
                        var data = new Date()
                        var continueTime = data.getTime()

                        $api.setStorage('continueTime', continueTime)
                        vm.showNologinPop = false

                        //跳转到视频页
                        api.openWin({
                            name: 'circle_video_detail',
                            url: 'circle_video_detail.html',
                            bounces: false,
                            pageParam: {
                                topicId: vm.currentClickTopicId,
                                screenType: vm.queryInfo.screenType,
                                channelId: vm.queryInfo.channelId,
                                keyword: vm.queryInfo.keyword
                            }
                        });
                    },


                    goLogin() {
                        this.showNologinPop = false

                        api.openWin({
                            name: 'login_win',
                            url: 'widget://html/login/login_win.html',
                            slidBackEnabled: true,
                            bounces: false,
                            reload: true,
                            pageParam: { key: 'value' }
                        });
                    },
                    goPage(item) {
                        var vm = this
                        if (item.type === 0) {
                            api.openWin({
                                name: 'circle_pic_detail',
                                url: 'circle_pic_detail.html',
                                bounces: false,
                                pageParam: {
                                    topicId: item.topicId,
                                    screenType: vm.queryInfo.screenType,
                                    channelId: vm.queryInfo.channelId,
                                    keyword: vm.queryInfo.keyword
                                }
                            });
                        } else {
                            var token = $api.getStorage('accessToken')
                            var continueTime = $api.getStorage('continueTime')
                            var data = new Date()
                            var currentTime = data.getTime()

                            vm.currentClickTopicId = item.topicId
                            if (token || (currentTime - continueTime <= 12 * 60 * 60 * 1000)) {
                                api.openWin({
                                    name: 'circle_video_detail',
                                    url: 'circle_video_detail.html',
                                    bounces: false,
                                    pageParam: {
                                        topicId: item.topicId,
                                        screenType: vm.queryInfo.screenType,
                                        channelId: vm.queryInfo.channelId,
                                        keyword: vm.queryInfo.keyword
                                    }
                                });
                            } else {
                                //大于12小时则弹出提示框,或首次未登录
                                vm.showNologinPop = true
                            }
                        }
                    }
                },
            })
            // 下拉刷新
            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function (ret, err) {
                vm.queryInfo.pageNum = 1;
                if (vm.isShowEmpty) {
                    vm.initAllNews();
                } else {
                    vm.initAllNews('reLoad');
                }
                api.refreshHeaderLoadDone()
            });

            api.addEventListener({
                name: 'refreshAllTopic'
            }, function (ret, err) {
                vm.queryInfo.pageNum = 1;
                if (vm.isShowEmpty) {
                    vm.initAllNews();
                } else {
                    vm.initAllNews('reLoad');
                }
            });

            api.addEventListener({
                name: 'updateUserAttention'
            }, function (ret, err) {
                vm.dynamicList.map(it => {
                    if (it.userId == ret.value.userId) {
                        it.attentionFlag = ret.value.attentionFlag
                    }
                })
            });

            api.addEventListener({
                name: 'updateLikeOrComments'
            }, function (ret, err) {
                for (let i = 0; i < vm.dynamicList.length; i++) {
                    if (vm.dynamicList[i].topicId == ret.value.topicId) {
                        vm.dynamicList[i].commentNumber = ret.value.commentNumber
                        vm.dynamicList[i].likeNumber = ret.value.likeNumber
                        vm.dynamicList[i].likeFlag = ret.value.likeFlag
                        break
                    }
                }
            });

            api.addEventListener({
                name: 'login'
            }, function (ret, err) {
                vm.isShowNoLogin = false
                if (vm.queryInfo.screenType == 1) {
                    vm.initAllNews()
                }
            })

            // 上拉加载
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: -10
                }
            }, function (ret, err) {
                if (vm.hasNext) {
                    vm.queryInfo.pageNum++
                    vm.initAllNews('add');
                }
            });

            api.addEventListener({
                name: 'refreshLike'
            }, function (ret) {
                if (vm.queryInfo.screenType == 2) {
                    vm.queryInfo.pageNum = 1;
                    vm.initAllNews()
                }
            })

        }
    </script>
</body>

</html>